﻿@{
    ViewBag.Title = "";
    var id = Model != null ? Model.ID : 0;
}
@using ZBJF.Warranty.BLL
@using ZBJF.Warranty.WebProvider
@using ZBJF.Warranty.Model
@model ZBJF.Warranty.Model.ServiceProviderBranch
<ul class="nav nav-tabs">
    <li><a href="/ServiceProvider/ServiceProviderBranchIndex">服务商网点列表</a></li>
    <li class="active"><a href="/ServiceProvider/ServiceProviderBranchEdit/@id">@(id > 0 ? "编辑服务商网点" : "添加服务商网点")</a></li>
</ul>
@using (Html.BeginForm("SaveServiceProviderBranch", "ServiceProvider", FormMethod.Post, new { id = "inputForm", name = "inputForm", @class = "form-horizontal", enctype = "multipart/form-data" }))
{
    @Html.AntiForgeryToken()
    @Html.HiddenFor(c => c.ID)
    <div class="control-group">
        <label class="control-label">所属服务商：</label>
        <div class="controls">
            @Html.DropDownListFor(m => m.ServiceProviderId, ConvertToSelector.Instance.ServiceProviderConvertToSelectList(), new { validate = "{required:true,messages:{required:'请选择所属服务商'}}" })
        </div>
    </div>
    <div class="control-group">
        <label class="control-label">网点名称：</label>
        <div class="controls">
            @Html.TextBoxFor(m => m.BranchName, new { validate = "{required:true,messages:{required:'请输入网点名称'}}", maxLength = 15, placeholder = "请输入网点名称" })
        </div>
    </div>
    <div class="control-group">
        <label class="control-label">所在省：</label>
        <div class="controls">
            @Html.DropDownListFor(m => m.ProvinceId, ConvertToSelector.Instance.D_ProvinceConvertToSelectList(), new { validate = "{required:true,messages:{required:'请选择省份'}}" })
        </div>
    </div>
    <div class="control-group">
        <label class="control-label">所在市：</label>
        <div class="controls">
            @Html.DropDownListFor(m => m.CityId, ConvertToSelector.Instance.D_CityConvertToSelectList(Model == null ? 0 : Model.ProvinceId), new { validate = "{required:true,messages:{required:'请选择城市'}}" })
        </div>
    </div>
    <div class="control-group">
        <label class="control-label">详细地址：</label>
        <div class="controls">
            @Html.TextBoxFor(m => m.Address, new { validate = "{required:true,messages:{required:'请输入详细地址'}}", maxLength = 100, placeholder = "请输入详细地址" })
        </div>
    </div>
    <div class="control-group">
        <label class="control-label">联系人：</label>
        <div class="controls">
            @Html.TextBoxFor(m => m.ContactName, new { maxLength = 15, placeholder = "请输入联系人姓名" })
        </div>
    </div>
    <div class="control-group">
        <label class="control-label">联系电话：</label>
        <div class="controls">
            @Html.TextBoxFor(m => m.ContactPhone, new { validate = "{required:true,messages:{required:'请输入联系电话'}}", maxLength = 15, placeholder = "请输入手机号码或座机号码" })
        </div>
    </div>
    <div class="control-group">
        <label class="control-label">电子邮箱：</label>
        <div class="controls">
            @Html.TextBoxFor(m => m.ContactEmail, new { validate = "{email:true}", maxLength = 100, placeholder = "请输入电子邮箱" })
        </div>
    </div>
    <div class="control-group">
        <label class="control-label">备注：</label>
        <div class="controls">
            <textarea name="Remark" rows="2" maxlength="200" style="max-height:50px;">@(Model!=null ? Model.Remark : "")</textarea>
        </div>
    </div>
    <div class="control-group">
        <label class="control-label"></label>
        <div class="controls">
            <label>
                @Html.CheckBox("IsAvailable", Model != null ? Model.IsAvailable : true)
                是否可用
            </label>
        </div>
    </div>

    <p class="pTitle" id="serviceTypeSetTitle" style="display:none" >服务类型设置</p>
    <div id="serviceTypeSet">
    </div>
    <input type="hidden" value="" id="ServiceTypeList" name="ServiceTypeList" />
    <div class="form-actions">
        <input id="btnSubmit" class="btn btn-primary Edit-R" type="button" value="保存" onclick="loading(this)">
        <input id="btnCancel" class="btn" type="button" value="重置" onclick="reset()">
    </div>
}
@section scripts{
    <script>
        $(function () {
            //选择省份
            $("#ProvinceId").change(function () {
                var provinceID = $("#ProvinceId").val();
                if (!provinceID) {
                    $("#CityId").html("<option value>请选择</option>");
                    return;
                }
                provinceChange(provinceID);
            });

            //选择服务商网点
            $(".ServiceType").on("click", function () {
                var _v = $($(".ServiceType:checked")[0]).val() || "";
                $("#virHidden").val(_v);
            })

            //选择服务商生成服务商类别
            var _v = $("#ServiceProviderId").val();
            if (_v)
            {
                var branchId = $("#ID").val();
                buildServiceType(_v, branchId);
            }
            $("#ServiceProviderId").on("change", function () {
                var _serviceProviderId = $(this).val();
                buildServiceType(_serviceProviderId);
            })

        });
        function provinceChange(provinceID) {
            $.ajax({
                url: "/Common/GetCityList?provinceID=" + provinceID,
                success: function (data) {
                    var html = "<option value>请选择</option>";
                    if (data && data.length > 0) {
                        for (var i = 0; i < data.length; i++) {
                            html += "<option value='";
                            html += data[i].Value;
                            html += "'>" + data[i].Text;
                            html += "</option>";
                        }
                        $("#CityId").html(html);
                    }
                }
            });
        }
        function reset() {
            document.getElementById("inputForm").reset();
        }
        function loading(_this) {
            
            if ($("#inputForm").valid()) {
                _this.disabled = 'disabled';

                //验证服务类型设置是否勾选
                var serviceType = $(".serviceType");
                var _serviceTypeData = []; //要提交的服务类型数据
                if (serviceType && serviceType.length > 0) {
                    //遍历服务商类型
                    for (var i = 0, j = serviceType.length; i < j; i++) {
                        var tagItem = $(serviceType[i]);
                        var _dataItem = {};
                        _dataItem.ServiceProviderTypeId= tagItem.attr("value");
                        var item = tagItem.next(".controls").find("input[type='checkbox']");
                        //遍历服务类型/ 必须选择一项
                        var _serviceTypeDataArr = [];
                        if (item && item.length > 0) {
                            var tag = false;
                            for (var m = 0, n = item.length; m < n; m++) {
                                var temp = $(item[m]);
                                if (temp.is(":checked")) {
                                    tag = true;
                                    _serviceTypeDataArr.push(temp.val()-0);
                                }
                            }
                            //if (!tag) {
                            //    var _text = tagItem.text();
                            //    layer.alert("请勾选服务类型：" + _text.substr(0, _text.length - 1) + "");
                            //    _this.disabled = '';
                            //    return false;
                            //}
                        }
                        _dataItem.ServiceType = _serviceTypeDataArr;
                        _serviceTypeData.push(_dataItem);
                    }
                }

                console.log(_serviceTypeData)
                $("#ServiceTypeList").val(JSON.stringify(_serviceTypeData));
                document.getElementById("inputForm").submit();
            }
        }

        //生成服务类型数据
        function buildServiceType(_serviceProviderId, branchId) {

            if (!_serviceProviderId) {
                $("#serviceTypeSet").html("");
                $("#serviceTypeSetTitle").hide(500);
                return;
            }
            $("#serviceTypeSetTitle").show(500);
            $.ajax({
                url: "/ServiceProvider/GetServiceProviderTypeList",
                data: { serviceProviderId: _serviceProviderId },
                type: "GET",
                success: function (data) {
                    if (!data) {
                        layer.alert("获取服务商类型失败！");
                        return;
                    }
                    var _html = '';
                    for (var i in data) {
                        var item = data[i];
                        if (item.branchTypeList) {
                            continue;
                        }
                        _html += '<div class="control-group">';
                        _html += '<label class="control-label control-label-checkbox serviceType"  value="' + item.Value + '">' + item.Text + '：</label>';
                        _html += '<div class="controls">';
                        for (var j in item.BranchTypeList) {
                            var temp = item.BranchTypeList[j];
                            _html += '<input type="checkbox" parentId="' + item.Value + '" value="' + temp.Value + '" />' + temp.Text;
                        }
                        _html += "</div>"
                        _html += "</div>";
                    }
                    $("#serviceTypeSet").html(_html);

                    //如果是修改
                    if (branchId)
                    {
                        getServiceType(branchId);
                    }
                }
            })
        }

        //做修改的时候获取已经选好的服务类型并自动勾选
        function getServiceType(branchId) {
            $.ajax({
                url: "/ServiceProvider/GetServiceTypeList",
                data: { branchId: branchId },
                type: "GET",
                success: function (data) {
                    console.log(data);
                    if (!data || data.length < 1)
                        return;

                    for (let i = 0, j = data.length; i < j; i++) {
                        var item = data[i];
                        $("input[type='checkbox'][parentId='" + item.ProductProviderTypeID + "'][value='" + item.ServiceType + "']").prop("checked", "checked");
                    }

                }
            })
        }
    </script>
}